<template>
  <div class="mala-header">
    <div class="left">
      <div class="logo"></div>
      <div class="title">
        <div class="cn">群众呼声</div>
        <div class="en">四川省网上群众工作平台</div>
      </div>
      <div class="time">
        <p class="date">{{ dateYear }} {{ dateWeek }}</p>
        <p class="timer"> {{ dateDay }} <span>晴天 11°/18°</span></p>
      </div>
    </div>

    <div class="center">
      <dv-decoration-5 style="width:100vw;height:90px;" :color="['#819cd9','#d3e4ff']" class="h-title" :dur="1"/>
      <div class="c-title" style="display: flex"><dv-decoration-3 style="width:50px;height:20px;" />群众呼声成都市智慧大屏<dv-decoration-3 style="width:50px;height:20px;" /></div>
    </div>

    <div class="right">
      <div class="menu">
        <div class="menu-item">今天</div>
        <div class="menu-item">昨天</div>
        <div class="menu-item">最近七天</div>
        <div class="menu-item">本月</div>
        <div class="menu-item">本年</div>
        <div class="menu-item">指定时间</div>
      </div>
    </div>
  </div>
</template>
<script>
import {formatTime} from '../../utils/index.js'

export default {
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      decorationColor: ['#568aea', '#000000'],
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  mounted() {
    const svgElement = document.querySelector('.dv-decoration-5 svg');
    const animateElements = svgElement.querySelectorAll('animate');
    const polylineElements = svgElement.querySelectorAll('polyline');

    polylineElements[0].setAttribute('stroke-width', '2');
    polylineElements[1].remove()
    animateElements.forEach(animate => {
      animate.setAttribute('repeatCount', '1');
    });
    this.timeFn()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy 年 MM 月 dd 日')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
  }
}
</script>
<style lang="scss" scoped>
.mala-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  //border-bottom: 2px solid hsla(0, 0%, 100%, .2);

  .left {
    margin-bottom: 10px;;
    width: 35%;
    display: flex;
    align-items: center;

    .logo {
      width: 50px;
      height: 50px;
      background-size: 100% 100%;
      background-image: url(../../assets/img/logo.png);
    }

    .time {
      margin-left: 60px;

      p {
        //color:#8face9;
        font-size: 20px;
        line-height: 30px;

        font-weight: bolder;
        background-image: -webkit-linear-gradient(top, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        &.date {
          font-family: "alibloder";
          font-size: 18px;
        }

        &.timer {
          display: flex;
          align-items: center;
          font-family: "number";
          font-size: 24px;

          span {
            font-size: 16px;
            font-weight: normal;
            margin-left: 15px;
          }
        }
      }
    }

    .title {
      margin-left: 15px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .cn {
        font-family: "阿里妈妈数黑体 Bold";
        background-image: -webkit-linear-gradient(top, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bolder;
        font-size: 26px;
        color: #d3e4ff;
        line-height: 32px;
        margin-top: 2px;
      }

      .en {
        margin-bottom: -2px;
        background-image: -webkit-linear-gradient(top, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: normal;
        font-size: 14px;
        letter-spacing: 2px;
      }
    }
  }
  .center{
    position: absolute;
    display: flex;
    left:50%;
    transform: translateX(-50%);
    top:40px;
    justify-content: space-between;
    .h-title{
      position: absolute;
      left:50%;
      transform: translateX(-50%);
      top:20px;
    }
    .c-title{
      position: absolute;
      left:50%;
      //font-family:"阿里妈妈数黑体 Bold";
      font-size:38px;
      font-weight: bolder;
      width:600px;
      align-items: center;
      line-height: 40px;
      top:50%;
      transform: translate(-50%,-10%);
      background-image: linear-gradient(to bottom, #d3e4ff 20%, #819cd9 80%);
      -webkit-background-clip: text;
      color: transparent;
      >div{
        margin:0 10px
      }
    }
  }
  .right{
    .menu{
      margin-top:-5px;
      display: flex;

      .menu-item{
        margin-left:30px;
        font-size:22px;
        font-family:"阿里妈妈数黑体 Bold";
        cursor: pointer;
        font-weight: bolder;
        line-height: 25px;
        background-image: linear-gradient(to right, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
  }
}
</style>


